/**
 * 图片预览
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableHighlight,
  TouchableOpacity,
  Image,
  Dimensions,
  KeyboardAvoidingView,
  TextInput,
  Modal,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Config from '../common/config';
import Request from '../common/request';
import Toast from 'react-native-root-toast';
import ImagePicker from 'react-native-image-picker';
// import ImageZoom from 'react-native-image-pan-zoom';
// import ImageViewer from 'react-native-image-zoom-viewer';
import Swiper from 'react-native-swiper';
import PhotoView from 'react-native-photo-view';




class ImagePreview extends React.Component {
  static navigationOptions = ({navigation, screenProps}) => ({
    headerTitle: `已选图片`,
    headerLeft: (
      <TouchableOpacity onPress={() => {navigation.goBack()}} style={{marginLeft: 10}}>
        <Icon name="close" size={24} />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity onPress={() => {navigation.goBack()}} style={{marginRight: 15}}>
        <Text style={{color: "green", fontSize: 18}}>完成</Text>
      </TouchableOpacity>
    ),
    gesturesEnabled: false,
  })
  constructor(props) {
    super(props);
    this.state = {
      fid: null,
      page: 1,//下一次请求的页码
      pagination: null,
      loading: false,
      refreshing: false,
      data: [],
      textInputTitle: "",
      textInputContent: "",
      images: [
        // "http://www.xiaomlove.com/demo/images/girl.jpg",
        // "http://www.xiaomlove.com/demo/images/girl.jpg",
        // "http://www.xiaomlove.com/demo/images/girl.jpg"
      ],
    };
  }
  componentDidMount() {
    this.props.navigation.setParams({
      handleSubmit: this.onSubmit.bind(this)
    });
    // this.setState({
    //   images: this.props.navigation.state.params.images,
    // }, () => {
     
    // })
    
  }

  onSubmit() {
    var self = this;
    if (this.state.loading) {
      return;
    }
    let data = {
      title: this.state.textInputTitle,
      content: this.state.textInputContent,
      fid: this.props.navigation.state.params.fid,
    }
    this.setState({
      loading: true,
    })
    if (!data.title || !data.content) {
      Toast.show("请先填写标题和内容...");
      return;
    }
    //Toast.show(JSON.stringify(data));
    Request.post(Config.api.topic, data)
    .then((response) => {
      console.log(response);
      self.setState({
          loading: false,
      })
      if (response.ret == 0) {
        Toast.show("发表成功：" + response.data.topic.id);
        self.props.navigation.goBack();
      } else {
        Toast.show(response.msg);
      }
    })
  }


  render() {
    let Images = this.props.navigation.state.params.images.map((item, i) => {
      console.log("image: ", item.uri);
      return (
      <View style={styles.slide1} key={i}>
        <Image style={[styles.imageItem, styles.image]} source={{uri: item.uri}}/>
      </View>
      )
    })
    // let images = this.props.navigation.state.params.images;
    // let index = this.props.navigation.state.params.index;
    return(
      // <View style={styles.container}>
      //   <ImageViewer 
      //     imageUrls={images}
      //     index={index}
      //     onClick={() => {this.props.navigation.goBack()}}
      //   />
      // </View>
  
      <Swiper 
        style={styles.container} 
        showsButtons={false}
        showsPagination={false}
      >
        {Images}
      </Swiper>

    )
  }
}

var styles = StyleSheet.create({
  container: {
    
  },
  imageItem: {
    resizeMode: "contain",
    width: "100%",
    height: "100%",
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }

});

module.exports = ImagePreview;

